<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../common/samples.css">
		<title>Windows: Form inside</title>
	</head>
	<body>
		<div class='header_comment'>Window with form inside</div>
		<div id='layout_div' style='width:600px; height:600px; margin:20px;'></div>
		<script type="text/javascript" charset="utf-8">

		var form = {
			view:"form",
			elements: [
				{ view:"text", label:'Login', name:"login" },
				{ view:"text", label:'Email', name:"email" },
				{ view:"button", value: "Submit", click:function(){
					if (this.getParentView().validate())
						webix.message("All is correct");
					else
						webix.message({ type:"error", text:"Form data is invalid" });
				}}
			],
			rules:{
				"email":webix.rules.isEmail,
				"login":webix.rules.isNotEmpty
			},
			elementsConfig:{
				labelPosition:"top",
				on:{ onchange:function(newv, oldv){  
					webix.message("Value changed from: "+oldv+" to: "+newv);
				}}
			}
		};

			webix.ui({
				view:"window",
				width:300,
			    left:50, top:50,
			    head:false,
				body:webix.copy(form)
			}).show();

			webix.ui({
				view:"window",
				width:300,
			    left:450, top:50,
			    head:"User's data",
				body:webix.copy(form)
			}).show();


		</script>
	</body>
</html>

			
		